// import { create } from "zustand";
import { create } from "./custom";
import { useEffect } from "react";

const useXxxStore = create(logMiddleware((set) => ({
  aaa: "",
  bbb: "",
  updateAaa: (value) => set(() => ({ aaa: value })),
  updateBbb: (value) => set(() => ({ bbb: value })),
})));

function logMiddleware(func) {
  return function (set, get, store) {
    function newSet(...args) {
      console.log("调用了 set，新的 state：", get());
      return set(...args);
    }

    return func(newSet, get, store);
  };
}

export default function TestZustand(props) {
  const updateAaa = useXxxStore((state) => state.updateAaa);
  const aaa = useXxxStore((state) => state.aaa);

  return (
    <div>
      <input onChange={(e) => updateAaa(e.currentTarget.value)} value={aaa} />
      <Bbb></Bbb>
    </div>
  );
}

function Bbb() {
  return (
    <div>
      <Ccc></Ccc>
    </div>
  );
}

function Ccc() {
  const aaa = useXxxStore((state) => state.aaa);
  useEffect(() => {
    useXxxStore.subscribe((state) => {
      console.log(useXxxStore.getState());
    });
  }, []);

  return <p>hello, {aaa}</p>;
}
